import { ref } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'

/**
 * 功能: 数据懒加载
 *
 * @param {*} fn  当目标可见时，要调用一次的函数
 * @returns target: 要观察的目标（vue3的引用）
 */
const useLazyData = (fn) => {
  const target = ref(null)

  // 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
  // 2. target 是观察的目标容器 dom对象 | 组件对象
  // 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出
  const { stop } = useIntersectionObserver(
    target, // target 是vue的对象引用。是观察的目标
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // observerElement 被观察的dom
    ([{ isIntersecting }], observerElement) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      if (isIntersecting) { // 目标可见，
        // 1. ajax可以发了，后续不需要观察了
        stop()
        // 2. 执行函数
        //
        fn()
      }
    },
    {
      threshold: 0
    }
  )

  return target
}
export const useCountdown = () => {
  const time = ref(0)
  const { pause, resume } = useIntervalFn(() => {
    // 每隔多长时间做什么 回调
    time.value--
    if (time.value <= 0) {
      pause()
    }
    console.log('useIntervalFn', Date.now())
  }, 1000, { immediate: false })
  // pause: 暂停,
  // resume: 开始
  const start = (num) => {
    time.value = num
    resume()
  }

  return { time, start }
}

export default useLazyData
